<template>
    <view class="container-c">
        <view class="black" @click="blankClose">
            <view
                class="popup"
                :style="'bottom: ' + bottom + 'px'"
                @click="catchtap"
            >
                <view class="close" @click="close" v-if="cancel">×</view>
                <view v-if="title" class="title">{{ title }}</view>
                <slot></slot>
            </view>
        </view>
    </view>
</template>

<script lang="ts" setup>
import { ref, defineEmits } from 'vue'
const props = defineProps(['title', 'cancel', 'spaceTapCancel', '', ''])
const emits = defineEmits(['cancel'])
const bottom = ref(0)

const close = () => {
    emits('cancel')
}
const blankClose = () => {
    if (props.spaceTapCancel) close()
}
const catchtap = () => {
    return false
}
uni.onKeyboardHeightChange(res => {
    bottom.value = res.height / 2
})
</script>

<style scoped>
.black {
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10086;
    background: rgba(32, 37, 54, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
}

.popup {
    width: 670rpx;
    min-height: 360rpx;
    background: #ffffff;
    border-radius: 16rpx;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-bottom: 60rpx;
}

.close {
    position: absolute;
    right: 20rpx;
    top: 10rpx;
    font-size: 60rpx;
    color: #e8e9ea;
}

.title {
    color: black;
    font-size: 36rpx;
    margin-top: 40rpx;
    font-weight: bold;
    margin-bottom: 40rpx;
}

.btn:not([size='mini']) {
    width: 610rpx;
    height: 94rpx;
    background: #6699fe;
    border-radius: 47rpx;
}
</style>
